<template>
  <div>
    <div class="top-title">
      <span class="tinyTitle">
        <div class="titleFlag"></div>
        {{ '热门招聘城市' }}
      </span>
    </div>
    <div class="top-line"></div>

    <div class="regionSalaryContent">
      <div class="echart">
        <div class="regionLineChart">
          <chinaMap />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chinaMap from './chinaMap';
export default {
  name: 'hotRecruitCity',
  components: { chinaMap },
  data() {
    return {
      hoverName: '',
      hoverValue: '',
      chartData: {},
      myChart: null,
      list: null,
      totalData: {
        salaryNum: null,
        companyNum: null
      },
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 10, // 每页多少条
        total: 0 // 总记录数
      },
      currentRegionName: '',
      pageSizes: [10, 20, 30],
      orderBy: '',
      sort: '',
      form: {}
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleDateChange(val) {
      this.tablePage.pageNum = 1;
      this.fetchData();
    },
    onRegionChange(val) {
      this.tablePage.pageNum = 1;
      this.fetchData();
    },
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage;
      this.fetchData();
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
      this.fetchData();
    }
  }
};
</script>

<style scoped lang="scss">
.list {
  /* height: 630px;
    overflow-y: auto; */
}
.app-container {
  padding-top: 0px;
  padding-right: 0px;
  // min-height: calc(100vh - 190px);
  overflow: hidden;
  // width: 100%;
  /* max-height: calc(100vh - 100px); */
  /* background: linear-gradient(180deg, #eaf5ff 0%, #ffffff 100%); */
  background-image: url('https://upload.yl1001.com/upload/images/view?file=Q,tr--ap_8c=fney6Bg2IJzH69mz6q=xfFRO5e57Imp9e0psmHce_CdVSB9mv.png');
  background-size: 100% 139px;
  background-repeat: no-repeat;
  border-radius: 10px 8px 8px 8px;
  border: 0;
  background-attachment: fixed;
  background-position: 200px 139px;
  padding-top: 10px;
}
.top-title {
  display: flex;
  margin: 20px 40px 10px 0px;
}
.tinyTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #222;
  font-weight: bold;
  margin-right: 40px;

  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
}
.top-line {
  height: 1px;
  background-color: #cfd8f5;
  margin: -24px 0px 20px 140px;
}
.regionSalaryContent,
.regionSalaryBasic {
  position: relative;
  display: flow-root;
  margin-top: 20px;
  // max-height: calc(100vh - 192px);
  // overflow-y: scroll;

  // padding-right: 56px;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
}
.regionSalaryBasic {
  // max-height: calc(100vh - 220px);
}
.regionBarChart,
.regionLineChart {
  display: flex;
  align-items: center;
  width: 100%;
}
.descTitle {
  color: #555;
  font-size: 16px;
}
.descNum {
  display: flex;
  align-items: baseline;
  color: #1b78ff;
  font-family: D-DIN-PRO-500-Medium;
  font-weight: bold;
  font-size: 28px;
  margin-top: 22px;
}
.rmb {
  font-size: 22px;
}
.regoinBarChartContainer {
  flex: 0.7;
}
.regionLineChart {
  flex: 1;
}
.regionBarDesc {
  display: flex;
  flex: 0.3;
}
.regionBarDescItem:last-of-type {
  margin-left: 37px;
}
.search-container {
  /* margin-bottom: 24px; */
}
.pagination {
  position: relative;
  margin-top: 24px;
}

::v-deep .el-table th > .cell {
  // color: rgba(0, 0, 0, 0.85);
}
::v-deep .el-table th {
  // background-color: #ef1010;
  color: #222;
  font-weight: bold;
}
::v-deep .el-table .el-table__body-wrapper {
  border-color: rgb(239, 239, 239); /* 设置表格列的边框颜色 */
}
::v-deep .el-table {
  border-color: rgb(239, 239, 239); /* 设置表格列的边框颜色 */
}
::v-deep.el-table .el-table__header-wrapper .el-table__header th,
::v-deep.el-table .el-table__body-wrapper tbody .el-table__row td {
  border-color: rgb(239, 239, 239); /* 设置表格列的边框颜色 */
}
.inputEdit {
  ::v-deep td:nth-child(2) {
    background-color: transparent;
  }
  // ::v-deep th:nth-child(2) {
  //   background-color:transparent;
  // }
  ::v-deep th {
    background-color: rgb(249, 249, 249);
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: transparent;
    border-color: transparent;
    color: #606266;
    cursor: not-allowed;
  }
}

::v-deep.el-form--inline .el-form-item {
  margin-right: 24px;
}
::v-deep .el-tabs__item {
  height: 40px !important;
  color: #555;
  font-size: 16px;
}
::v-deep .el-tabs__item.is-active {
  color: #1574ff;
  font-weight: bold;
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent;
  height: 1px;
}

::v-deep .el-button--primary {
  color: #fff;
  background-color: #1574ff;
  border-color: #1574ff;
}
.filter-item {
  margin-bottom: 12px;
}
::v-deep .el-form-item {
  display: flex;
  align-items: center;
}
::v-deep .el-form-item__label {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 27px; */
  min-width: 82px !important;
  color: #555555;
  flex-wrap: nowrap;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
::v-deep.el-popover {
  background: #3662ec;
}

::v-deep .el-button--primary.is-plain {
  color: #409eff;
  background: #fff;
  border-color: #b3d8ff;
}
.edit-button {
  margin-left: 10px;
}
.toolTipGuide {
  display: flex;
}
.toolTipItems {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.stepImageContainer {
}
.stepImage {
  width: 264px;
  height: 149px;
}
.stepDesc {
  margin-top: 14px;
  font-size: 14px;
}
.salary-scope {
  // background: #BDD8FF;
}
</style>
